import { transition } from "@mechanic-design/transition";

export const handler = async ({ inputs, frame, done, getCanvas, drawLoop }) => {
  const { width, height } = inputs;

  const { ctx } = getCanvas(width, height);
  const xPos = transition({
    from: width * 0.3,
    to: width * 0.7,
    duration: 2,

    // Allows to set how often the transition should run
    // Defaults to 1
    iterationCount: 10,

    // Defines the direction of the animation
    // forward (0 -> 1)
    // runs the animation in the specified direction
    //
    // reverse (1 -> 0)
    // runs the animation in the reversed direction 
    //
    // alternate (0 -> 1 -> 0 -> 1 -> ...)
    // runs the animation in alternating directions, starting
    // with a forwards run.
    //
    // alternateReverse (1 -> 0 -> -> 0 -> ...)
    // runs the animation in alternating directions, starting
    // with a reversed run.
    //
    // Defaults to forward
    direction: 'alternate',

    // A user can go for one of the pre-built easing functions
    // by referencing its name
    easing: 'easeInOutQuad',
  });

  drawLoop(({ timestamp }) => {
    ctx.clearRect(0, 0, width, height);

    ctx.fillStyle = "blue";
    ctx.fillRect(xPos(timestamp), height / 2 - 50, 100, 100);

    if (timestamp < 2) {
      frame();
    } else {
      done();
    }
  });
};

import { transition } from "@mechanic-design/transition";

export const handler = async ({ inputs, frame, done, getCanvas, drawLoop }) => {
  const { width, height } = inputs;

  const { ctx } = getCanvas(width, height);
  const xPos = transition({
    from: width * 0.3,
    to: width * 0.7,
    duration: 2,

    // Easing functions are called with a linear t value below 0 and 1
    // and map this value to whatever easing curve you want to approximate
    //
    // The example below maps to a cubic curve
    easing: t => t * t * t
  });

  drawLoop(({ timestamp }) => {
    ctx.clearRect(0, 0, width, height);

    ctx.fillStyle = "blue";
    ctx.fillRect(xPos(timestamp), height / 2 - 50, 100, 100);

    if (timestamp < 2) {
      frame();
    } else {
      done();
    }
  });
};

const colorEase = transition({
    from: 0,
    to: 1,
    duration: 2,
    easing: 'easeInOutQuad',
});

drawLoop(({ timestamp }) => {
  // The imaginary colorInterpolator function would be a custom function
  // (user-written or from a library) that interpolates two colors based on
  // a 0–1 value. The transition helper is used here to put the easing curve
  // on the 0–1 scale.
  const color = colorInterpolator(color1, color2, colorEase);

  ctx.fillStyle = color;
});